<template>
  <div class="w-100">
    <div
      class="dir-item rel flex-c flex-v align-center pointer w-100"
      :class="{ active: item.active|| selectAllDir }"
    >
      <div v-if="registory.id!=='0'&&editable" :class="{block:item.active}" class="todo-box">
        <div v-if="checkable" class="checkbox" @click="$emit('toggle',index)">
          <img v-if="!item.active" src="@/assets/images/checkbox.png" alt="">
          <img v-else src="@/assets/images/checkbox-checked.png" alt="">
        </div>
        <div class="abs func-box flex-c align-center">
          <el-popover
            :value="showPop"
            placement="right"
            width="80"
            trigger="manual"
          >
            <div
              class="mb pointer popover-name"
              style="margin-bottom: 10px"
              @click="
                showPop = false;
                $refs.updateNameModal.open();
              "
            >
              <i class="el-icon-edit-outline" />
              编辑
            </div>
            <div
              class="mb pointer popover-name"
              style="margin-bottom: 10px"
              @click="download"
            >
              <i class="el-icon-download" />
              下载
            </div>
            <div
              class="pointer popover-name red"
              @click="
                showPop = false;
                handleDel();
              "
            >
              <i class="el-icon-delete" />
              删除
            </div>
            <i
              slot="reference"
              class="el-icon-more blue pointer el-icon"
              @click.stop="showPop = !showPop"
            />
          </el-popover>
        </div>
      </div>
      <div v-else-if="(registory.id!=='0'||!registory.id)&&checkable" :class="{block:item.active}" class="todo-box">
        <div class="checkbox" @click="$emit('toggle',index)">
          <img v-if="!item.active" src="@/assets/images/checkbox.png" alt="">
          <img v-else src="@/assets/images/checkbox-checked.png" alt="">
        </div>
      </div>

      <div
        class="rel flex-c flex-v align-center"
        style="width: 100%; overflow: hidden"
        @dblclick.stop="openDir"
      >
        <div v-if="item.fileLength" class="badge abs flex-c align-center">
          {{ item.fileLength }}
        </div>
        <div class="img-box flex-c flex-v rel">
          <img src="@/assets/svg/dir.svg" alt="" class="img">
          <img v-if="!item.fileType||item.fileType==='video'" src="@/assets/svg/video.svg" class="inner-icon abs">
          <img v-if="item.fileType==='text'" src="@/assets/svg/text.svg" class="inner-icon abs">
          <img v-if="item.fileType==='audio'" src="@/assets/svg/audio.svg" class="inner-icon abs">
          <img v-if="item.fileType==='image'" src="@/assets/svg/image.svg" class="inner-icon abs">
        </div>
        <div class="content-box">
          <div class=" name nowrap">{{ item.categoryName }}</div>
          <div v-if="!onlyName" class=" time">{{ item.createTime }}</div>
        </div>
      </div>
    </div>
    <UpdateNameModal
      ref="updateNameModal"
      :type="updateNameType"
      :item="item"
      :item-name="item.categoryName"
      @get="getName"
    />
  </div>
</template>
<script>
import UpdateNameModal from './UpdateNameModal.vue'
import { eUpdateCategory, eDelCategory, getList } from '@/api/element'
import { compressAndDownloadZip } from '@/utils/saveFile'
export default {
  components: { UpdateNameModal },
  props: {
    item: {
      type: Object,
      default() {
        return {}
      }
    },
    registory: {
      type: Object,
      default() {
        return {}
      }
    },
    index: {
      type: Number,
      default: 0
    },
    selectAllDir: {
      type: Boolean,
      default: false
    },
    editable: {
      type: Boolean,
      default: true
    },
    checkable: {
      type: Boolean,
      default: true
    },
    onlyName: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      stare: false,
      active: -1,
      previewModal: false,
      updateNameType: 'dir',
      showPop: false
    }
  },
  watch: {
    item: {
      handler(val) {
        this.$forceUpdate()
      },
      deep: true
    }
  },
  mounted() {
    document.body.addEventListener('click', (e) => {
      e.preventDefault()
      e.stopPropagation()
      this.showPop = false
    })
  },
  methods: {

    async download() {
      this.showPop = false
      const res = await getList({
        materialCategoryId: this.item.id.toString(),
        materialType: 'video'
      })
      if (res.success) {
        if (res.result.total === 0) {
          this.$message.warning('当前文件夹为空')
          return
        }
        this.$message.success('开始下载，请稍后')
        const list = (res.result.records || []).map((item) => {
          item.fileUrl = item.materialUrl
          item.fileName = item.materialName
          return item
        })
        compressAndDownloadZip(list, this.item.categoryName)
      } else {
        this.$message.error(res.message)
      }
    },
    handleDel() {
      this.$confirm('确定要删除该素材？', '删除素材')
        .then(async() => {
          const res = await eDelCategory({ id: this.item.id.toString() })
          if (res.success) {
            this.$message.success('成功')
            this.$emit('refresh')
          } else {
            this.$message.error(res.message)
          }
        })
        .catch((e) => {
          this.$message.warning('取消')
        })
    },
    openDir() {
      this.$emit('open', this.item)
    },
    async getName({ name }) {
      const res = await eUpdateCategory({
        categoryName: name,
        id: this.item.id.toString()
      })
      if (res.success) {
        this.$message.success('修改成功')
        this.$emit('refresh')
      } else {
        this.$message.error(res.message)
      }
    },
    showPopFunc() {
      this.$nextTick(() => {
        // this.showPop = true
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.checkbox{
  position: absolute;
  left: 5px;
  top: 5px;
  z-index: 11;
  img{
    width: 20px;
    height: 20px;
    cursor: pointer;
  }
}
.badge {
  width: 30px;
  height: 30px;
  background: rgba(0, 119, 255, 0.94);
  border-radius: 50%;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  right: -10px;
  top: -15px;
}
.red {
  color: rgba(255, 0, 0, 1);
}
.dir-item {
  border-radius: 5px;
  overflow: hidden;
  border: 0.1px solid rgba(0, 0, 0, 0.1);
  max-width: 148px;
  .hidden{
    display: none;
  }
  .todo-box{
    display: none;
  }
  .todo-box.block{
    display: block;
  }
  &:hover{
    .todo-box{
      display: block;
    }
  }
  .popover-name {
    font-size: 20px;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    margin-bottom: 10px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .popover-name.sm {
    font-size: 14px;
  }
  .func-box {
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.7);
    box-sizing: border-box;
    padding: 0 12px;
    height: 24px;
    top: 5px;
    right: 5px;
    z-index: 11;
    .el-icon {
      font-size: 14px;
      &:last-child {
        margin-right: 0;
      }
    }
    .red {
      color: rgba(255, 0, 0, 1);
    }
    .blue {
      color: rgba(0, 119, 255, 0.76);
    }
  }

  .img-box {
    height: 150px;
    border-bottom: 0.1px solid rgba(0, 0, 0, 0.1);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f2f3f4;
  }
  .inner-icon{
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    z-index: 11;
    top: 70px;
    width: 18px;
    height: auto;
  }
  .img {
    width: 70px;
    height: 70px;
  }
  .content-box {
    padding: 8px 6px;
    background-color: #fff;
    width: 100%;
    .name {
      font-size: 14px;
      font-weight: 400;
      color: rgba(0, 0, 0, 1);
      margin-top: 5px;
      display: block;
      width: 100%;
      box-sizing: border-box;
    }
    .time {
      font-size: 12px;
      font-weight: 400;
      color: rgba(166, 166, 166, 1);
      margin-top: 5px;
    }
  }
}
.dir-item.active {
  border-color: rgba(0, 119, 255, 0.76);
}
</style>
